<template>
  <div id="mine">
    <div class="logon">
      <img :src="avatar" alt="" />
      <h3>
        <van-cell is-link @click="showPopup" class="deng" ref="deng"
          ><span>点击登录</span></van-cell
        >
        <div class="tui" ref="tui">
          <span>{{ name }}</span>
          <button @click="exit()" class="btn" ref="btn">X</button>
        </div>

        <van-popup v-model="show" class="tan">
          <van-form @submit="onSubmit">
            <van-field
              class="user"
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              class="password"
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px" class="btn">
              <van-button
                class="button"
                round
                block
                type="danger"
                native-type="submit"
                >登录/注册</van-button
              >
            </div>
          </van-form>
        </van-popup>
      </h3>
    </div>
    <van-grid column-num="3" square>
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="bill-o" text="优惠券" />
      <van-grid-item icon="goods-collect-o" text="礼品卡" />
      <van-grid-item icon="location-o" text="我的收藏" />
      <van-grid-item icon="flag-o" text="我的足迹" />
      <van-grid-item icon="contact" text="会员福利" />
      <van-grid-item icon="aim" text="地址管理" />
      <van-grid-item icon="warn-o" text="账号安全" />
      <van-grid-item icon="service-o  " text="联系客服" />
      <van-grid-item icon="question-o" text="帮助中心" />
      <van-grid-item icon="smile-comment-o" text="意见反馈" />
    </van-grid>
  </div>
</template>

<script>
import { PostUser } from "@/request/api";
import { Dialog } from "vant";
import { Toast } from "vant";
// let jiantou=document.querySelector('.deng i');
// console.log(jiantou);
export default {
  data() {
    return {
      show: false,
      username: "",
      password: "",
      userInfo: "",
      avatar:require("@/assets/qingwei.jpg"),
      name: "点击登录",
      show: false,
    };
  },

  components: { [Dialog.Component.name]: Dialog.Component },

  created() {},
  mounted() {
    // console.log(this.$refs.deng);
    let deng = this.$refs.deng;
    let tui = this.$refs.tui;
    let token = localStorage.getItem("token");
    if (token) {
      this.avatar = localStorage.getItem("avatar");
      this.name = localStorage.getItem("name");
      deng.style.display = "none";
      tui.style.display = "block";
    }
  },
  beforeCreate() {
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
      duration: 1000,
    });
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onSubmit(values) {
      // console.log("submit", values);
      PostUser({ username: values["用户名"], pwd: values["密码"] }).then(
        (res) => {
          if (res.errno == 0) {
            // console.log(res);
            localStorage.setItem("token", res.data.token);
            localStorage.setItem("avatar", res.data.userInfo.avatar);
            localStorage.setItem("name", res.data.userInfo.username);
            this.show = false;
            this.$router.go(0);
          }
        }
      );
    },
    exit() {
      Dialog.confirm({
        title: "登出账号确认",
        message: "您是否想要退出当前账号",
      })
        .then(() => {
          localStorage.removeItem("token");
          this.$router.go(0);
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang='less' scoped>
#mine {
  overflow: hidden;
  height: 100%;
  .logon {
    height: 0.7rem;
    background-color: #333333;
    padding: 0.2rem;
    display: flex;
    align-items: center;
    img {
      width: 0.7rem;
      height: 0.7rem;
      border-radius: 50%;
      margin-right: 0.1rem;
    }
    h3 {
      width: 100%;
      .deng {
        padding: 0;
        background-color: #333;
        position: static;
        span {
          color: #fff;
        }
      }
      .tui {
        display: none;
        .btn {
          float: right;
          background-color: #333;
          border: 0;
          color: #fff;
        }
        span {
          color: #fff;
        }
      }

      .tan {
        width: 90%;
        height: 2.2rem;
        padding-top: 0.3rem;
        .user {
          height: 0.68rem;
        }
        .password {
          height: 0.68rem;
        }
        .btn {
          text-align: center;
        }
      }
    }
  }
}
</style>